
 <template>
  <div class="add_container">
    <!--检索栏目start-->
    <div class="stpes" v-show="deviceType != 'mobile'">
      <Steps></Steps>
    </div>
    <div class="fill">
      <div v-show="stepsCurrent == 0">
        <Condition></Condition>
      </div>
      <!-- show style="min-width: 100%" -->
      <div v-show="stepsCurrent == 1" style="width:100%">
        <!-- <Task :cycleId="cycleId"></Task> -->
        <Task></Task>
      </div>
      <div v-if="stepsCurrent == 2" style="width: 100%">
        <Confirmation></Confirmation>
      </div>
      <div v-if="stepsCurrent == 3" style="width: 100%">
        <!-- <Confirmation></Confirmation> -->
        <Report></Report>
      </div>
      <div :class="[showPreview ? 'preview_box_event_none' : 'preview_box']">
        <div
          class="preview_panel_overlay"
          :class="[showPreview ? 'preview_panel_overlay_opacity' : '']"
          @click="close"
        ></div>
        <Preview
          class="preview_position"
          :class="[showPreview ? 'preview_position_transform100' : '']"
        ></Preview>
      </div>
    </div>
  </div>
</template>
 
 <script>
// import STable from '@/components/table/'
// import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import bus from "@/bus";
import Steps from "@comp/CarbonAccounting/steps";
import Condition from "@comp/CarbonAccounting/condition";
import Preview from "@comp/CarbonAccounting/preview";
import Task from "@comp/CarbonAccounting/task";
import Report from "@comp/CarbonAccounting/report";
import Confirmation from "@comp/CarbonAccounting/confirmation";
import { Mixin } from "@/mixins/mixin.js";
import {
  getInitAddUnitByUnitId,
  getInitUnitDataByUnitId,
  accountingFill,
  accountingFillBaseInfo
} from "@/api/api";
export default {
  mixins: [Mixin],
  // mixins: [JeecgListMixin, mixinDevice, mixin, mixinDevice],
  name: "accountingtask",
  components: {
    Condition,
    Preview,
    Task,
    Steps,
    Confirmation,
    Report
  },
  data() {
    return {
      _originalData: null,
      showPreview: false
    };
  },
  mounted() {
    bus.$on("showPreviewFun", bool => {
      this.showPreview = bool;
    });
    bus.$on("emitAccountingTask", (param, val) => {
      // 缓存数据
      if (JSON.stringify(this._originalData) == JSON.stringify(param)) {
        this.setStepsCurrent(val);
      } else {
        // 根据填报的体验信息获取unitId
        accountingFillBaseInfo(param).then(res => {
          this.setCycleId(res.result);
          // 通过id回调获取核算数据模板
          getInitUnitDataByUnitId({
            cycleId: this.cycleId
          }).then(result => {
            this.setFillData(result.result.tableList);
            this.setBasicInformation(result.result.basicInfo);
            this._originalData = param;
            this.setStepsCurrent(val);
          });
        });
      }
    });
  },
  created() {},
  methods: {
    close() {
      this.showPreview = false;
    }
  }
};
</script>
 
 <style lang="scss" >
@media screen and (min-width: 1200px) {
  .add_container {
    border-radius: 10px;
    overflow: hidden;
    width: 85%;
    min-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 1px 6px 12px 0px #000;
    margin: 30px auto;
    // background: rgba(255,255,255,.5);
    // background-image: radial-gradient(circle at 0 0, #f1f8ff, #cae5f1) !important;
  }
  .stpes {
    position: relative;
    height: 56px;
    z-index: 33;
    background: rgba(255, 255, 255, 0.5);
  }
  .fill {
    // position: relative;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    background: rgba(255, 255, 255, 0.5);
    z-index: 33;
    padding: 30px 20px;
  }
  .desc {
    text-align: left;
  }
  .preview_box {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: 99;
  }
  .preview_box_event_none {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 99;
  }
  .preview_panel_overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: hsla(0, 0%, 97.6%, 0.8);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .preview_panel_overlay_opacity {
    opacity: 1 !important;
  }
  .preview_position {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    width: 450px;
    position: absolute;
    top: 80px;
    right: 0;
    bottom: 0;
    padding: 22px 0px 22px 40px;
    transform: translateX(100%);
    z-index: 99;
    transition: transform 0.3s;
    color: #262a2f;
  }
  .preview_position_transform100 {
    transform: translateX(0%) !important;
  }
}
@media screen and (min-width: 993px) and (max-width: 1199px) {
    .add_container {
    border-radius: 10px;
    overflow: hidden;
    width: 85%;
    min-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 1px 6px 12px 0px #000;
    margin: 30px auto;
    // background: rgba(255,255,255,.5);
    // background-image: radial-gradient(circle at 0 0, #f1f8ff, #cae5f1) !important;
  }
  .stpes {
    position: relative;
    height: 56px;
    z-index: 33;
    background: rgba(255, 255, 255, 0.5);
  }
  .fill {
    // position: relative;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    background: rgba(255, 255, 255, 0.5);
    z-index: 33;
    padding: 30px 20px;
  }
  .desc {
    text-align: left;
  }
  .preview_box {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: 99;
  }
  .preview_box_event_none {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 99;
  }
  .preview_panel_overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: hsla(0, 0%, 97.6%, 0.8);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .preview_panel_overlay_opacity {
    opacity: 1 !important;
  }
  .preview_position {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    width: 450px;
    position: absolute;
    top: 80px;
    right: 0;
    bottom: 0;
    padding: 22px 0px 22px 40px;
    transform: translateX(100%);
    z-index: 99;
    transition: transform 0.3s;
    color: #262a2f;
  }
  .preview_position_transform100 {
    transform: translateX(0%) !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
    .add_container {
    border-radius: 10px;
    max-width: 95%;
    overflow: hidden;
    min-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 1px 6px 12px 0px #000;
    margin: 30px auto;
    // background: rgba(255,255,255,.5);
    // background-image: radial-gradient(circle at 0 0, #f1f8ff, #cae5f1) !important;
  }
  .stpes {
    position: relative;
    height: 56px;
    z-index: 33;
    background: rgba(255, 255, 255, 0.5);
  }
  .fill {
    // position: relative;
    width: 100%;
    // overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    background: rgba(255, 255, 255, 0.5);
    z-index: 33;
    padding: 10px 10px;
  }
  .desc {
    text-align: left;
  }
  .preview_box {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: 99;
  }
  .preview_box_event_none {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 99;
  }
  .preview_panel_overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: hsla(0, 0%, 97.6%, 0.8);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .preview_panel_overlay_opacity {
    opacity: 1 !important;
  }
  .preview_position {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    width: 100%;
    position: absolute;
    top: 80px;
    right: 0;
    bottom: 0;
    padding: 10px 20px 22px 20px;
    transform: translateX(100%);
    z-index: 99;
    transition: transform 0.3s;
    color: #262a2f;
  }
  .preview_position_transform100 {
    transform: translateX(0%) !important;
  }
}
@media screen and (max-width: 767px) {
  .add_container {
    border-radius: 10px;
    max-width: 95%;
    overflow: hidden;
    min-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 1px 6px 12px 0px #000;
    margin: 30px auto;
    // background: rgba(255,255,255,.5);
    // background-image: radial-gradient(circle at 0 0, #f1f8ff, #cae5f1) !important;
  }
  .stpes {
    position: relative;
    height: 56px;
    z-index: 33;
    background: rgba(255, 255, 255, 0.5);
  }
  .fill {
    // position: relative;
    width: 100%;
    // overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    background: rgba(255, 255, 255, 0.5);
    z-index: 33;
    padding: 10px 10px;
  }
  .desc {
    text-align: left;
  }
  .preview_box {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: 99;
  }
  .preview_box_event_none {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 99;
  }
  .preview_panel_overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: hsla(0, 0%, 97.6%, 0.8);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .preview_panel_overlay_opacity {
    opacity: 1 !important;
  }
  .preview_position {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    width: 100%;
    position: absolute;
    top: 80px;
    right: 0;
    bottom: 0;
    padding: 10px 20px 22px 20px;
    transform: translateX(100%);
    z-index: 99;
    transition: transform 0.3s;
    color: #262a2f;
  }
  .preview_position_transform100 {
    transform: translateX(0%) !important;
  }
}
</style>